<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>UEditor Plus演示</title>
  <link rel="stylesheet" href="./style.css"/>
  <script src="./../third-party/jquery-1.10.2.js"></script>
  <script>
    $(function (){
        $(document).on('click','[target="editor_iframe"]',function(){
            $('[data-github-source]').attr('href','https://github.com/modstart-lib/ueditor-plus/blob/master/_examples/'+$(this).attr('href'));
            $('[data-gitee-source]').attr('href','https://gitee.com/modstart-lib/ueditor-plus/blob/master/_examples/'+$(this).attr('href'));
        });
    });
  </script>
  <script>var _hmt = _hmt || [];
  (function () {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?5f8b495b287894a451c761c963e6e34a";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();</script>
</head>
<body>
<div class="demo-header">
  <div class="link">
    <a data-github-source href="https://github.com/modstart-lib/ueditor-plus/blob/master/_examples/completeDemo.html" target="_blank">Github源码</a>
    <a data-gitee-source href="https://gitee.com/modstart-lib/ueditor-plus/blob/master/_examples/completeDemo.html" target="_blank">Gitee源码</a>
  </div>
  <h1>UEditor Plus 功能演示</h1>
</div>
<div class="demo-menu">
  <h3>基础示例</h3>
  <ul>
    <li>
      <a href="completeDemo.html" target="editor_iframe">完整示例</a><br/>
      编辑器的完整功能
    </li>
    <li>
      <a href="simpleDemo.html" target="editor_iframe">简单示例</a><br/>
      使用基础的按钮实现简单的功能
    </li>
  </ul>
  <h3>应用展示</h3>
  <ul>
    <li>
      <a href="submitFormDemo.html" target="editor_iframe">表单应用</a><br/>
      编辑器的内容通过表单提交到后台
    </li>
    <li>
      <a href="resetDemo.html" target="editor_iframe">重置编辑器</a><br/>
      将编辑器的内部变量清空，重置。
    </li>
    <li>
      <a href="textareaDemo.html" target="editor_iframe">文本域渲染编辑器</a><br/>
      将编辑器渲染到文本域，并且将文本域的内容放到编辑器的初始化内容里
    </li>
  </ul>
  <h3>二次开发</h3>
  <ul>
    <li>
      <a style="color:red;" href="customizeToolbarUIDemo.html" target="editor_iframe">二次开发例子</a><br/>
      添加自定义的普通按钮、下拉菜单按钮、对话框按钮
    </li>
    <li>
      <a href="customToolbarDemo.html" target="editor_iframe">自定义Toolbar</a><br/>
      用自己的皮肤，设计自己的编辑器
    </li>
    <li>
      <a href="customPluginDemo.html" target="editor_iframe">自定义插件</a><br/>
      在编辑器的基础上开发自己的插件
    </li>
  </ul>
  <h3>高级案例</h3>
  <ul>
    <li>
      <a href="sortableDemo.html" target="editor_iframe">表格排序示例</a><br/>
      编辑表格,并设置排序后可在展示区域点击排序
    </li>
    <li>
      <a href="sectionDemo.html" target="editor_iframe">目录大纲示例</a><br/>
      获取编辑内容的目录大纲，并通过操作目录，更新编辑器内容
    </li>
    <li>
      <a href="multiDemo.html" target="editor_iframe">多编辑器实例</a><br/>
      一个页面实例化多个编辑器，互不影响
    </li>
    <li>
      <a href="renderInTable.html" target="editor_iframe">在表格中渲染编辑器</a><br/>
      表格中渲染编辑器
    </li>
    <li>
      <a href="jqueryCompleteDemo.html" target="editor_iframe">jquery</a><br/>
      jquery中使用编辑器
    </li>
    <li>
      <a href="jqueryValidation.html" target="editor_iframe">jqueryValidation</a><br/>
      编辑器在jqueryValidation中验证
    </li>
    <li>
      <a href="uparsedemo.html" target="editor_iframe">展示页面uparse.js解析</a><br/>
      通过调用uparse.js在展示页面中自动解析编辑内容
    </li>
    <li>
      <a href="filterRuleDemo.html" target="editor_iframe">过滤规则定制化</a><br/>
      通过配置filterRules可以定制黑白名单，过滤和转换你要的标签和属性
    </li>
    <li>
      <a href="setWidthHeightDemo.html" target="editor_iframe">设置宽高</a><br/>
      设置宽高的demo页面
    </li>
    <li>
      <a href="multiEditorWithOneInstance.html" target="editor_iframe">多编辑共用实例</a><br/>
      多个编辑区使用同一个编辑器实例
    </li>
  </ul>
</div>
<div class="demo-iframe">
    <div class="demo-iframe-container">
      <iframe name="editor_iframe" src="./completeDemo.html"></iframe>
    </div>
</div>
</body>
</html>
